<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../utils/vue.min.js"></script>
		<style type="text/css">
			.active{
				width: 200px;
			}
			
		</style>
	</head>
	
	<body>
		<div id="app">
			<p>----------------v-text--------------------</p>
			<!-- v-text中的内容就是p标签中所有的内容 -->
			<p v-text = "msg">淑娜</p>
			<!-- 差值表达式{{}} 除了显示绑定数据的内容，还能显示其他的内容 -->
			<p>{{msg}} 双双</p>
			
			<p>----------------v-html--------------------</p>
			<p v-html="msg2">yuyuyuyuy</p>
			<!-- 差值表达式{{}} 除了显示绑定数据的内容，还能显示其他的内容 -->
			<p >{{msg2}} lalala</p>
			
			<!-- v-text中无论内容是什么，都只会被解析为文本 -->
			<p v-text="content"></p>
			<!-- v-html 内容中有html结构会被解析为标签 -->
			<p v-html="content"></p>
			
			<p>----------------v-on:click--------------------</p>
			<!-- v-on:name = "function" 用来为元素绑定事件 ,绑定的方法定义在methods中 -->
			<button v-on:click="doIt()">button1  绑定click事件</button>
			<button @click="doIt()">button2 绑定click事件的缩写</button>
			<br /> <p></p>
			<!-- vue是双向数据绑定，数据变化时视图变化；视图变化时数据也变化 -->
			<button id="#food" @click="changeFood()">{{food}}</button>
			<p>----------v-on:click  计数器----------</p>
			<button @click="numSub()" style="color: red;">-</button>
			<button>{{count}}</button>
			<button @click="numPlus"  style="color: red;">+</button>
			
			<p>------------------v-show----------------------</p>
			<!-- v-show只是隐藏了，设置了display:none, 实际上元素还在 -->
			<button type="button" @click="showFun()">显示/隐藏图片</button>
			<p></p>
			<img v-show="isShow" src="../images/flower1.jpg" style="width: 300px;" />
			<p>------------------v-if----------------------</p>
			<!-- v-if直接操作dom元素，判断表达式为true，元素存在于dom树，表达式为false，元素从dom树移除 -->
			<button type="button" @click="ifFun()">显示/隐藏图片</button>
			<p></p>
			<img v-if="isIf" src="../images/zhishi.jpg" style="width: 300px;" />
			
			<p>------------------v-bind 绑定属性值，比如src, title, class----------------------</p>
			<img  v-bind:src="imgUrl"/>
			<img  :src="imgUrl" @click="changeClass()" :class="isActive ? 'active' : '' " :title="titleText"/>
			<img  :src="imgUrl" @click="changeClass()" :class="{active:isActive}" :title="titleText"/>
			<p>----------v-bind:src  切换图片----------</p>
			<button @click="prePic()"  v-show="index > 0">上一张</button>
			<img :src="imgArr[index]" />
			<button @click="nextPic()" v-show="index < imgArr.length-1">下一张</button>
		</div>
	</body>
		
	<script>
		var vm = new Vue({
			el:"#app",
			data:{
				// ----------------v-text--------------------
				msg:"message",
				// ----------------v-html--------------------
				msg2:"test v-html",
				content:"<a href='https://www.baidu.com'>百度</a>",
				food:"糖醋排骨",
				count:0,
				// ------------------v-show----------------------
				isShow:true,
				// ------------------v-if----------------------
				isIf:true,
				// ------------------v-bind----------------------
				imgUrl:"../images/celamoon.png",
				isActive:false,
				titleText:"celamoon",
				imgArr:[
					"../images/pic1.png",
					"../images/pic2.png",
					"../images/pic3.png",
					"../images/pic4.png",
					],
				index:0,
			},
			methods:{
				// ----------------v-on:click--------------------
				doIt:function(){
					console.log("双双最棒！");
				},
				changeFood:function(){
					// 这两句实现的效果一样,js原生写法太繁琐复杂。
					// js需要dom操作元素，但vue是双向数据绑定，只需要考虑数据，修改数据时视图也发生变化
					// document.getElementById("#food").innerText += "好好吃！";
					this.food += "好好吃！";
				},
				numSub:function(){
					if(this.count > 0){
						this.count--;
					}else {
						alert("已经到底啦！")
					}
				},
				numPlus:function(){
					if(this.count < 10){
						this.count++;
					}else{
						alert("已经到顶啦！")
					}
				},
				// ------------------v-show----------------------
				showFun:function(){
					this.isShow = !this.isShow;
				},
				// ------------------v-if----------------------
				ifFun:function(){
					this.isIf = !this.isIf;
				},
				// ------------------v-bind----------------------
				changeClass:function(){
					this.isActive = ! this.isActive;
				},
				prePic:function(){
					if(this.index > 0){
						this.index--;
					}else{
						alert("前面没有了");
					}
				},
				nextPic:function(){
					if(this.index < this.imgArr.length-1){
						this.index++;
					}else{
						alert("后面没有了");
					}
				}
			}
		})
	</script>
	
	<!-- changeFood 的html写法 -->
	<!-- <!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title></title>
		</head>
		<body>
			<button id="food"  onclick="changeFood()"></button>
		</body>
		
		<script>
			var food="糖醋排骨";
			document.getElementById("food").innerText = food;
			function changeFood(){
				document.getElementById("food").innerText += "好好吃";
			}
		</script>
	</html>
	 -->
</html>
